<template>
	<MyPage title="生成海报" :isback="true">
		<view slot="gBody">
			<view class="view-box">
				<scroll-view scroll-x="true" class="template-scroll">
					<view class="template-scroll-view">
						<view
							class="template-list"
							v-for="(item, index) in templateList"
							:key="index"
						>
							<image :src="item.src" mode="widthFix" />
							<view class="title">{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="view-box">
				<u-form>
 					<u-form-item label="生成海报格式" label-width="220">
						<radio-group @change="typeRadioChange" slot="right" class="radio-group">
							<label v-for="(item, index) in ['图片格式','PDF格式']" :key="index" class="label">
								<radio :value="String(index)" :checked="index==typeIndex" color="#B00E0E" class="radio" />
								<view>{{item}}</view>
							</label>
						</radio-group>
					</u-form-item>
				</u-form>
			</view>
			
			<view class="btn-view">
				<MyBtn title="立即生成" class="btn" @click="btnSubmit"></MyBtn>
			</view>
		</view>
	</MyPage>
</template>

<script>
import mixin from "@/libs/mixin.js";
import { generatePicture } from '@/api/compute.js'
export default{
	mixins: [mixin],
	data() {
		return {
			okObj: {},
			templateList: [
				{id:1, src:'/static/images/template1.jpg',title:'默认'}
			],
			typeIndex: 0,
			info: {
				name:'王先生', //个人信息
				tel:'010-652415555',
				company:'百度科技公司', //公司信息
				logo:'已上传',
				url:'www.baidu.com',
				address:'西北旺路软件园二期',
				//wechat:'', //联系信息
				autograph:'已上传',
				wechatCode:'无',
				alipayCode:'已上传',
				tiktokCode:'无',
				blogCode:'无'
			}
		}
	},
	onLoad(option) {
		uni.getStorage({
			key: 'okObj',
			success: (res)=>{
				console.log(res.data);
				this.okObj = res.data;
			}
		});
	},
	methods:{
		// 生成海报格式-单选
		typeRadioChange(obj){
			this.typeIndex = obj.detail.value;
		},
		// 生成图片
		btnSubmit(){
			uni.showLoading({
				title: '正在生成海报，请稍候！',
				mask: true
			});
			setTimeout(()=>{
				uni.showToast({
					title: '生成成功，请在相册里查看！',
					icon:'success'
				});
				this.$utils.navigateTo('/diy/goods-list');
			},2000);
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.view-box{
	margin-top:15rpx;
	background: #fff;
	padding: 10rpx 40rpx;
	border-radius: 10rpx;
	.box-title{
		padding:15rpx 0 3rpx;
		.title-text{
			font-size:30rpx;
		}
	}
}
.template-scroll{
	width:100%;
	padding: 20rpx 15rpx;
	height: 380rpx;
	.template-scroll-view{
		white-space: nowrap;
		.template-list{
			float:left;
			text-align: center;
			margin-right:20rpx;
			image{
				width:200rpx;
				height:330rpx;
				border:1px #B00E0E solid;
				border-radius: 10rpx;
			}
			.title{
				font-size:24rpx;
				color:#B00E0E;
			}
		}
	}
}
.radio-group{
	white-space: nowrap;
	display:flex;
	.label{
		display:flex;
		align-items: center;
		margin-left:18rpx;
		.radio{
			transform:scale(0.7);
		}
	}
}
.btn-view{
	height:180rpx;
	.btn{
		position:fixed;
		left:4%;
		bottom:30rpx;
		z-index:10;
		width:92%;
	}
}
</style>